/*
 * @Author: qiang.yan yanqiang@happycfc.com
 * @Date: 2024-01-05 15:13:13
 * @LastEditTime: 2024-01-23 17:00:48
 * @LastEditors: qiang.yan yanqiang@happycfc.com
 * @Description: 描述
 */
import React, { useState } from 'react'
import { RiEyeFill, RiEyeOffFill } from '@remixicon/react'
import { DemoBlock } from '@/library/widgets/DemoBlock'
import styles from './index.module.scss'
import { Input } from '@/library/gallery/components/Input'

export default (): React.ReactElement => {
  const [value, setValue] = useState('')
  const [visible, setVisible] = useState(false)

  return (
    <>
      <DemoBlock title="基础用法">
        <Input
          placeholder="请输入内容"
          clearable
          value={value}
          onChange={(val) => {
            setValue(val)
          }}
          style={{ '--background-color': '#ddd' }}
        />
      </DemoBlock>
      <DemoBlock title="mode - label">
        <Input
          mode="label"
          placeholder="请输入验证码"
        />
      </DemoBlock>
      <DemoBlock title="输入内容右对齐">
        <Input
          placeholder="请输入验证码"
          style={{ '--text-align': 'right' }}
          clearable
        />
      </DemoBlock>
      <DemoBlock title="组合用法">
        <Input
          enterKeyHint="enter"
          autoFocus
          onlyShowClearWhenFocus
          mode="label"
          label="年收入"
          placeholder="请输入年收入"
          clearable
          value={value}
          onChange={(val) => {
            setValue(val)
          }}
        />
      </DemoBlock>
      <DemoBlock title="只读状态">
        <Input placeholder="请输入内容" mode="label" label="学历" value="北京大学本科" readOnly />
        <Input placeholder="请输入内容" mode="label" label="身高" value="175.24cm" readOnly />
        <Input placeholder="请输入内容" mode="label" label="出身日期" value="1995-09-09" readOnly />
      </DemoBlock>
      <DemoBlock title="禁用状态">
        <Input placeholder="请输入内容" mode="label" label="学历" value="北京大学本科" disabled />
        <Input placeholder="请输入内容" mode="label" label="身高" value="175.24cm" disabled />
        <Input placeholder="请输入内容" mode="label" label="出身日期" value="1995-09-09" disabled />
      </DemoBlock>
      <DemoBlock title="查看密码">
        <div className={styles.password}>
          <Input
            mode="label"
            label="输入密码"
            className={styles.input}
            placeholder="请输入密码"
            type={visible ? 'text' : 'password'}
            icon={!visible ? (
              <RiEyeFill size={18} onClick={() => setVisible(true)} />
            ) : (
              <RiEyeOffFill size={18} onClick={() => setVisible(false)} />
            )}
          />
        </div>
      </DemoBlock>
    </>
  )
}
